<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改学生信息</title>
  <style>
    .box {
      width: 400px;
      margin: 0 auto;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>添加学生信息</h1>
    <form action="">
      <input type="hidden" id="id" name="id">
      <p><label for="class">班级：</label><input type="text" name="clazz" id="class"></p>
      <p><label for="name">姓名：</label><input type="text" name="name" id="name"></p>
      <p>
        <label for="gender">性别：</label>
        <input type="radio" name="gender" id="gender1" value="男">男
        <input type="radio" name="gender" id="gender2" value="女">女
      </p>
      <p><label for="age">年龄：</label><input type="text" name="age" id="age"></p>
      <p><label for="hobby">爱好：</label>
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="睡觉">睡觉
        <input type="checkbox" name="hobby" value="学习">学习
      </p>
      <p><label for="tel">电话：</label><input type="text" name="tel" id="tel"></p>
      <p><label for="address">地址：</label>
        <select name="address" id="address">
          <option value="郑州">郑州</option>
          <option value="洛阳">洛阳</option>
          <option value="新乡">新乡</option>
        </select>
      </p>
      <p><label for="remark">备注：</label>
        <textarea name="remark" id="remark" cols="30" rows="10"></textarea>
      </p>
      <p><label for="date">入学时间：</label><input type="date" name="date" id="date"></p>
      <input type="submit" value="提交">
    </form>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/utils.js"></script>
  <script>
    axios.defaults.baseURL = 'http://localhost:3008/api/student/'
    const id = window.location.hash.substring(1)
    axios({
      url: 'getstudent',
      method: 'GET',
      params: {
        'id': id
      }
    }).then(result => {
      console.log(result);
      let arr = result.data[0]
      document.querySelector('#id').value = arr.id
      document.querySelector('#class').value = arr.clazz
      document.querySelector('#name').value = arr.name
      document.querySelector('input[value="' + arr.gender + '"]').checked = true
      document.querySelector('#age').value = arr.age
      if (arr.hobby.includes('吃饭')) {
        document.querySelectorAll('input[name="hobby"]')[0].checked = true
      }
      if (arr.hobby.includes('睡觉')) {
        document.querySelectorAll('input[name="hobby"]')[1].checked = true
      }
      if (arr.hobby.includes('学习')) {
        document.querySelectorAll('input[name="hobby"]')[2].checked = true
      }
      document.querySelector('#tel').value = arr.tel
      document.querySelector('option[value="' + arr.address + '"]').selected = true
      document.querySelector('#remark').value = arr.remark
      document.querySelector('#date').value = arr.date
    }).then(result => {
      // window.location.href = 'index.html'
    }).catch(error => {
      console.log('出错');
    }).finally(() => {
      console.log('finally');
    })

    var form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      e.preventDefault()
      const data = serializeKeyValue(document.querySelector('form'))
      axios({
        url: 'updatestudent',
        method: 'POST',
        data: data
      }).then(result => {
        window.location.href = 'index.html'
      }).catch(error => {
        console.log('出错');
      }).finally(() => {
        console.log('finally');
      })
    })

  </script>
</body>

</html>